Ext.form.ItineraryLegList = Ext.extend(Ext.List, {
    title: 'Results',
    itemSelector: 'div.sel',
    overClass: 'over',
    singleSelect: true,
    emptyText: 'No results.',
    isLoaded: false,
    scroll: false,  

    initComponent: function () {

        Ext.regModel('ItineraryLeg', {
            fields: [
            { name: 'StopName', type: 'string' },
            { name: 'ToStopName', type: 'string' },
			{ name: 'StartTime', type: 'string' },
            { name: 'EndTime', type: 'string' },
            { name: 'Duration', type: 'string' },
            { name: 'TransportType', type: 'string' },
            { name: 'RouteName', type: 'string' }
		    ]
        });


        var store = new Ext.data.Store({
            model: 'ItineraryLeg'
        });

        this.store = store;


        this.tpl = new Ext.XTemplate(
        [
                    '<tpl for=".">',
                            '<div class="sel" id="{ItineraryId}">',
                            '<table width="100%" class="trip-list-item">',
                                '<tr>',

                                '<td width="20%"><table>',
                                //'<tr><td class="{TransportType}"></td></tr>',
                                '<tr><td>{TransportType}</td></tr>',
                                '</table></td>',

                                '<td width="40%"><table>',
                                    '<tr><td class="bold-text">From</td><td>&nbsp;{StopName}</td>',
                                    '<tr><td class="bold-text">To</td><td>&nbsp;{ToStopName}</td></tr>',
                                    '<tr><td class="bold-text">For</td><td>&nbsp;{Duration}</td></tr>',
                                '</table></td>',

                                '<td width="40%"><table>',                                    
                                    '<tr><td class="bold-text">Start</td><td>&nbsp;{StartTime}</td></tr>',
                                    '<tr><td class="bold-text">Arrived</td><td>&nbsp;{EndTime}</td></tr>',                                                                            
                                '</table></td>',

                                '</tr>',
                             '</table>',

                            '<table width="100%" class="trip-list-item">',
                                '<tr>',

                                '<td width="20%"><table>',
        //'<tr><td class="{TransportType}"></td></tr>',
                                '<tr><td>{TransportType}</td></tr>',
                                '</table></td>',

                                '<td width="40%"><table>',
                                    '<tr><td class="bold-text">From</td><td>&nbsp;{StopName}</td>',
                                    '<tr><td class="bold-text">To</td><td>&nbsp;{ToStopName}</td></tr>',
                                    '<tr><td class="bold-text">For</td><td>&nbsp;{Duration}</td></tr>',
                                '</table></td>',

                                '<td width="40%"><table>',
                                    '<tr><td class="bold-text">Start</td><td>&nbsp;{StartTime}</td></tr>',
                                    '<tr><td class="bold-text">Arrived</td><td>&nbsp;{EndTime}</td></tr>',
                                '</table></td>',

                                '</tr>',
                             '</table>',


                            '<table width="100%" class="trip-list-item">',
                                '<tr>',

                                '<td width="20%"><table>',
        //'<tr><td class="{TransportType}"></td></tr>',
                                '<tr><td>{TransportType}</td></tr>',
                                '</table></td>',

                                '<td width="40%"><table>',
                                    '<tr><td class="bold-text">From</td><td>&nbsp;{StopName}</td>',
                                    '<tr><td class="bold-text">To</td><td>&nbsp;{ToStopName}</td></tr>',
                                    '<tr><td class="bold-text">For</td><td>&nbsp;{Duration}</td></tr>',
                                '</table></td>',

                                '<td width="40%"><table>',
                                    '<tr><td class="bold-text">Start</td><td>&nbsp;{StartTime}</td></tr>',
                                    '<tr><td class="bold-text">Arrived</td><td>&nbsp;{EndTime}</td></tr>',
                                '</table></td>',

                                '</tr>',
                             '</table>',


                            '<table width="100%" class="trip-list-item">',
                                '<tr>',

                                '<td width="20%"><table>',
        //'<tr><td class="{TransportType}"></td></tr>',
                                '<tr><td>{TransportType}</td></tr>',
                                '</table></td>',

                                '<td width="40%"><table>',
                                    '<tr><td class="bold-text">From</td><td>&nbsp;{StopName}</td>',
                                    '<tr><td class="bold-text">To</td><td>&nbsp;{ToStopName}</td></tr>',
                                    '<tr><td class="bold-text">For</td><td>&nbsp;{Duration}</td></tr>',
                                '</table></td>',

                                '<td width="40%"><table>',
                                    '<tr><td class="bold-text">Start</td><td>&nbsp;{StartTime}</td></tr>',
                                    '<tr><td class="bold-text">Arrived</td><td>&nbsp;{EndTime}</td></tr>',
                                '</table></td>',

                                '</tr>',
                             '</table>',

                            '<table width="100%" class="trip-list-item">',
                                '<tr>',

                                '<td width="20%"><table>',
        //'<tr><td class="{TransportType}"></td></tr>',
                                '<tr><td>{TransportType}</td></tr>',
                                '</table></td>',

                                '<td width="40%"><table>',
                                    '<tr><td class="bold-text">From</td><td>&nbsp;{StopName}</td>',
                                    '<tr><td class="bold-text">To</td><td>&nbsp;{ToStopName}</td></tr>',
                                    '<tr><td class="bold-text">For</td><td>&nbsp;{Duration}</td></tr>',
                                '</table></td>',

                                '<td width="40%"><table>',
                                    '<tr><td class="bold-text">Start</td><td>&nbsp;{StartTime}</td></tr>',
                                    '<tr><td class="bold-text">Arrived</td><td>&nbsp;{EndTime}</td></tr>',
                                '</table></td>',

                                '</tr>',
                             '</table>',

                            '</div>',
                    '</tpl>',
                    '<div class="x-clear"></div>'

        ]
        );

        this.on('selectionchange', function (e, row, rowdata) {
            if (row.length == 0) {
                return;
            }
//            setCard("trip-planner-map");
//            showPathOnMap(rowdata[0].data.ItineraryKmlUrl);
        });

        Ext.form.ItineraryLegList.superclass.initComponent.call(this);
    }
});

Ext.reg('itineraryleglist', Ext.form.ItineraryLegList);

